<template>
	<view>
	<u-navbar :custom-back="back" title="新增商品"></u-navbar>
	
		<view class="head">
			<view class="left">
				<view class="quan"></view>
				<view class="zi1">商品标题</view>
			</view>
			<view class="kuang">
				<textarea value="" placeholder="请输入商品标题" />
			</view>

			<view class="left">
				<view class="quan"></view>
				<view class="zi1">商品分类</view>
			</view>
			<view class="lei" @click="show=true">
				{{value}}
				<image src="../../static/users/right.png" mode=""></image>
			</view>
			<u-select @confirm="confirm" v-model="show" :list="list"></u-select>
			<view class="datu">
				<view class="lefts">
					<view class="quans"></view>
					<view class="zis1">商品大图</view>
				</view>
				<view class="uoload">
					<u-upload width="180" height="180" max-count="1" max-size="1024*7" image-mode="aspectFill"
						class="upload" ref="uUpload" :action="action" :auto-upload="false" del-bg-color="#000"
						:file-list="fileList"></u-upload>
				</view>
			</view>
			<view class="left">
				<view class="quan"></view>
				<view class="zi1">商品列表图</view>
			</view>
			<u-upload width="180" height="180" max-count="9" max-size="1024*7" image-mode="aspectFill" class="upload"
				ref="uUpload2" :action="actions" :auto-upload="false" del-bg-color="#000" :file-list="fileLists">
			</u-upload>
		</view>

		<view class="ping_detail">
			商品规格
			<!-- <image src="../../static/users/right.png" mode=""></image> -->
		</view>

		<view class="guige" @click="gofuige">
			<!-- <image class="right" src="../../static/users/right.png" mode=""></image> -->
			<view class="detail_guige" v-for="(item,index) in 3">
				<image src="../../static/users/guige.png" mode=""></image>
				<view class="name">
					规格分类名称
				</view>
				<view class="num">
					¥10 库存:100
				</view>
			</view>
		</view>
		
		<view class="ping_detail">
			商品详情
			<!-- <image src="../../static/users/right.png" mode=""></image> -->
		</view>
		<view class="detail" @click="godetail">
			<image class="image_shop" src="../../static/users/shopimage.png" mode=""></image>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>

			<view class="xian"></view>

			<view class="explain">
				<view class="text1">服务说明</view>
				<view class="text2">1、支持本人办理或其他代理人办理两种方式随机抽选，并征求本人意见</view>
				<view class="text3">2、选择纠纷事由、纠纷描述、诉讼请求信息</view>
			</view>
            <view class="over" @click="over">
            	完成
            </view>
			<view class="bottom">

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://www.example.com/upload',
				fileList: [],
				actions: 'http://www.example.com/upload',
				fileLists: [],
				show: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					},
					{
						value: '2',
						label: '河'
					},
					{
						value: '2',
						label: '海'
					}
				],
				value:"分类名称"
			}
		},
		methods: {
		confirm(e){
			console.log(e);
			this.value=e[0].label
		},
		gofuige(){
			uni.redirectTo({
				url:"../guige/guige"
			})
		},
		over(){
			uni.redirectTo({
				url:"../shopguan/shopguan"
			})
		},
		back(){
			uni.showModal({
				content:"确认退出？推出将清空数据",
				success:res=>{
					console.log(res.confirm);
					if(res.confirm){
						uni.redirectTo({
							url:"../shopguan/shopguan"
						})
					}
				}
			})
			
		},
		godetail(){
			uni.navigateTo({
				url:"../adddetail/adddetail"
			})
		}
		// back(){
		// 	console.log(1);
		// }
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F2F4FA;
	}
	
	.head {
		padding: 10rpx 30rpx 30rpx 30rpx;
		margin: 30rpx;
		width: 690rpx;
		// height: 759rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.left {
			position: relative;

			.quan {
				width: 10rpx;
				height: 10rpx;
				background: #FF4646;
				border-radius: 50%;
				position: absolute;
				top: 17rpx;
			}

			.zi1 {
				margin: 30rpx 0 20rpx 20rpx;
			}
		}

		.kuang {
			margin: 20rpx 0 0 0;
			padding: 20rpx;
			width: 630rpx;
			height: 120rpx;
			background: #F2F4FA;
			border-radius: 30rpx;

			textarea {
				height: 80rpx;
			}
		}

		.lei {
			padding: 0 30rpx;
			margin: 20rpx 0 30rpx 0;
			width: 630rpx;
			height: 80rpx;
			background: #F2F4FA;
			border-radius: 40rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #181818;
			position: relative;

			image {
				position: absolute;
				right: 40rpx;
				top: 35rpx;
				width: 8rpx;
				height: 15rpx;
			}
		}

		.datu {
			width: 630rpx;
			height: 200rpx;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-between;

			.lefts {
				position: relative;
				top: 80rpx;

				.quans {
					width: 10rpx;
					height: 10rpx;
					background: #FF4646;
					border-radius: 50%;
					position: absolute;
					top: 17rpx;
				}

				.zis1 {
					margin: 0rpx 0 0 20rpx;
				}
			}
		}
	}

	.ping_detail {
		margin: 30rpx 0 0 41rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 300;
		color: #666666;
		height: 40rpx;
		line-height: 40rpx;
		image {
			margin-left: 570rpx;
			width: 10rpx;
			height: 18rpx;
			line-height: 40rpx;
		}
		text {
			position: absolute;
			left: 611rpx;
			top: 290rpx;
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			line-height: 40rpx;
		}

		
	}

	.guige {
		padding: 10rpx 30rpx 40rpx 30rpx;
		margin: 30rpx;
		width: 690rpx;
		// height: 440rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;
         .right{
         	position: absolute;
			right: 10rpx;
			top: 210rpx;
         	width: 10rpx;
         	height: 18rpx;
         	line-height: 40rpx;
         }
		.detail_guige {
			margin-top: 30rpx;
			padding: 10rpx;
			width: 630rpx;
			height: 100rpx;
			background: #F2F4FA;
			border-radius: 30rpx;
			position: relative;

			image {
				width: 100rpx;
				height: 80rpx;
			}

			.name {
				font-size: 26rpx;
				position: absolute;
				left: 120rpx;
				top: 25rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #181818;
			}

			.num {
				position: absolute;
				left: 120rpx;
				top: 60rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}
		}
	}

	.detail {
		background-color: #fff;
		width: 690rpx;
		margin: 0 0 0 30rpx;
		position: relative;
		.over{
			position: absolute;
			bottom: 100rpx;
			left: 0rpx;
			width: 690rpx;
			height: 100rpx;
			background: #181818;
			box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
			border-radius: 50rpx;
			
			text-align: center;
			line-height: 100rpx;
		
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.ping_detail {
			margin: 30rpx 0 0 41rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #666666;
			height: 40rpx;
			line-height: 40rpx;

			text {
				position: absolute;
				left: 611rpx;
				top: 290rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #666666;
				line-height: 40rpx;
			}

			image {
				margin-left: 570rpx;
				width: 10rpx;
				height: 18rpx;
				line-height: 40rpx;
			}
		}

		.token {
			margin: 11rpx 0 0 30rpx;
			width: 690rpx;
			height: 204rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			position: relative;

			image {
				margin: 19rpx 0 0 30rpx;
				width: 88rpx;
				height: 88rpx;
			}

			.head {
				position: absolute;
				left: 139rpx;
				top: 30rpx;
				width: 400rpx;
				height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.yang_s {
				position: absolute;
				top: 70rpx;
				left: 139rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #666666;
			}

			.date {
				position: absolute;
				top: 41rpx;
				right: 29rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #999999;
			}

			.content {
				margin: 19rpx 0 0 31rpx;
				width: 628rpx;
				height: 60rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #000000;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.image_shop {
			margin: 10rpx 0 0 0rpx;
			width: 690rpx;
			height: 368rpx;
		}

		.explain {
			margin: 59rpx 0 0 42rpx;
			width: 610rpx;
			height: 230rpx;

			.text1 {
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color: #777777;
				margin-bottom: 30rpx;
			}

			.text2 {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.text3 {
				margin-top: 25rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
			}

		}


		.bottom {
			width: 750rpx;
			height: 400rpx;
		}
	}
</style>
